﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    
    <link href="/resource/js/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/editor.md-master/css/editormd.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/jquery.tagit.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">编辑表单</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
	            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
	            <li><a href="#">Dashboard</a></li>
	            <li class="active">Current page</li>
	        </ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<header class="panel-heading tab-bg-dark-navy-blue">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#baseinfo"><i class="fa fa-cog"></i>基本设置</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#fields"><i class="fa fa-bars"></i>字段管理</a>
                        </li>
                    </ul>
                </header>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="baseinfo" class="tab-pane active">
                            <form class="col s12" id="form1" th:object="${form}" th:action="@{/admin/forms/edit}" onsubmit="return validateForm();" method="post">
								<input name="id" id="id" type="hidden" th:value="*{id}" />
								<div class="form-group form-control-medium">
									<label for="formName">表单名：</label>
									<input id="formName" name="formName" type="text" class="form-control" th:value="*{formName}">
								</div>
								<div class="form-group form-control-medium">
		                            <label for="tableName">附加表名：</label>
		                            <input id="tableName" name="tableName" type="text" class="form-control" th:value="*{tableName}">
								</div>
								<div class="form-group">
									<label for="type">表单性质：</label>
		                            <label class="checkbox-inline">
		                                <input type="radio" name="type" id="type-yes" value="1" th:checked="${form.type} == 1">是
		                            </label>
		                            <label class="checkbox-inline">
		                                <input type="radio" name="type" id="type-no" value="0" th:checked="${form.type} == 0">否
		                            </label>
								</div>
								<div class="form-btn-group-left">
					            	<button type="submit" class="btn btn-info">保存</button>
					            </div>
							</form>
                        </div>
                        <div id="fields" class="tab-pane">
                        	<div class="panel-body">
				                 <!-- <span class="pull-right badge badge-info">32</span> -->
				                 <button class="btn btn-primary btn-addon btn-sm"  th:onclick="'javascript: toAdd(\''+${form.id}+'\')'">
				                     <i class="fa fa-plus"></i>添加字段
				                 </button>
				            </div>
                        	<table class="table table-hover">
								<thead>
									<tr>
										<th style="width:50px;">选择</th>
										<th>表单提示文字</th>
										<th>数据字段名</th>
										<th>数据类型</th>
										<th style="width:300px;">操作</th>
									</tr>
								</thead>
								<tbody>
									<tr th:each="field : ${fields}">
										<td><input type="checkbox" class="flat-grey list-child" th:value="${field.id}"/></td>
										<td th:text="${field.fieldText}"></td>
										<td th:text="${field.fieldName}"></td>
										<td th:text="${field.dataType}"></td>
										<td>
											<a th:href="@{/admin/field/toEdit(id=${field.id})}" class="btn btn-xs btn-success">编辑</a>
											<span>&nbsp;|&nbsp;</span>
											<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:onclick="'javascript: confrimRemove(\''+${field.id}+'\')'">删除</a>
										</td>
									</tr>
								</tbody>
							</table>
                        </div>
                    </div>
                </div>
			</section>
		</div>
	</div>
	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
                    	<div class="alert alert-block alert-danger">
	                        <strong>注意!</strong> 字段删除后，如有调用则会报错且删除后不可恢复.
	                    </div>
						<h4 class="modal-title">您确定要删除该记录吗？</h4>
						<input type="hidden" id="cacheID" />
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
    <script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript">
	    function validateForm(){
	    	//console.log($("#content").val());
	    	return true;
	    }
	    
	    function toAdd(fid){
			window.location.href = "/admin/field/toAdd?formId="+fid;	
		}
	    
	    function confrimRemove(id){
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}
		
		function remove(){
			var currentID = $("#cacheID").val();
			window.location.href="/admin/field/delete?id="+currentID;
			$("#remove-dialog").modal('hide');
		}
    </script>
</body>
</html>
